import { reactive } from "vue";
import model from "./model";
import router from "../../router/router";
const initials = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
const options = reactive({
  className: "kdcrud",
  config: {
    labelWidth: "120px",
    labelPosition: "top",
    rules: {
      tenantId: [
        { required: true, message: "客户id是必填项", trigger: "blur" },
      ],
      select: [{ required: true, message: "用户名是必填项", trigger: "blur" }],
      timeSelect: [
        { required: true, message: "密码是必填项", trigger: "blur" },
      ],
      timepicker: [
        { required: true, message: "评分是必填项", trigger: "blur" },
      ],
    },
    formRef: "formLogin",
    formItemArr: [
      {
        id: 1,
        label: "32453534",
        name: "input",
        options: {
          modelName: "input",
          placeholder: "请输入asdasd 内容",
          size: "small",
          clearable: true,
          disabled: false,
        },
      },
      {
        id: 2,
        label: "下拉列表",
        prop: "select",
        name: "select",
        options: {
          modelName: "select",
          placeholder: "please select your zone",
          optionArr: [
            {
              label: "上海",
              value: "shanghai",
            },
            {
              label: "北京",
              value: "beijing",
            },
            {
              label: "天津",
              value: "tianjin",
            },
          ],
        },
      },
      {
        id: 6,
        label: "虚拟下拉列表",
        prop: "vSelect",
        name: "vSelect",
        options: {
          modelName: "vSelect",
          optionsArr: Array.from({ length: 1000 }).map((_, idx) => ({
            value: `Option ${idx + 1}`,
            label: `${initials[idx % 10]}${idx}`,
          })),
          multiple: true,
        },
      },
      {
        id: 7,
        label: "时间选择器11111",
        name: "timePicker",
        options: {
          modelName: "timePicker",
        },
      },
      {
        id: 7,
        label: "时间选择器22222",
        prop: "timeSelect",
        name: "timeSelect",
        options: {
          modelName: "timeSelect",
        },
      },
      {
        id: 7,
        name: "button",
        options: {
          buttonText: "提交按钮",
          onclick: async (formEl) => {
            await formEl().validate((valid, fields) => {
              if (!valid) {
                console.log(fields);
                return;
              }
              console.log(model);
              router.push("/login");
            });
          },
        },
      },
    ],
  },
  options: {
    tableData: [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
    height: 300,
    size: "small",
    optionsArr: [
      {
        prop: "address",
        label: "Address",
        width: 280,
        slot(scope) {
          return `<div>这个是作用域插槽${scope.row.name}</div>`;
        },
      },
      {
        prop: "date",
        label: "Date",
      },
      {
        prop: "name",
        label: "Name",
        width: 180,
      },
    ],
  },
  background: true,
  layout: "prev, pager, next",
  total: 3500,
  currentChange() {},
});
export default options;
